<template>
	<view :class="AppStyle">
		<view v-if="topicDetail.mainImg!=null">
			<!-- <image :src="topicDetail.mainImg" mode="widthFix"></image> -->
			<OneImg :imgUrl="topicDetail.mainImg"></OneImg>
		</view>
		<view class="detail-title">
			你赞成春节放开烟花炮竹吗？
		</view>
		<view class="info-content detail-content">
			过去的一年，也是沉寂的一年。无声但心不散，恍惚间，项目组成立已三年，这三年陪伴着很多成员度过了他们人生中重要的转折点。我们是年轻的项目组，是自由的项目组，但绝不是一个有实力的项目组。我们缺乏有创新能力、执着学习进取的人才，缺乏有效的管理机制，单靠我们不变的心是根本发展不了，进步不了的。于是乎，在新的一年里，我真诚希望项目组在职成员，懂得学习，善于学习，只有学习才能武装自己，只有学习才能改变自己。
		</view>
		<!--  如果有关联资讯，则展示固定文案 -->
		<view class="cu-nav info-content" @tap="toNewsList">
			<view>
				<i class="zi zi_fire" style="color: #ff3333;margin-right: 10rpx;"></i>
				<text class="content">相关新闻资讯</text>
			</view>
			<view class="action">
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<!-- 二选一 -->
		<view v-if="topicDetail.topicType === 1" class="info-content">
			<pk-bar :pkData="radioData"></pk-bar>
		</view>
		<!-- 单选 -->
		<view v-if="topicDetail.topicType === 2" class="info-content">
			<f-progress :multilData='multilData' :clickType="true"></f-progress>
		</view>
		<!-- 多选 -->
		<view v-if="topicDetail.topicType === 3" class="info-content">
			<f-progress :multilData='multilData' :clickType="true"></f-progress>
		</view>
		<!-- <view class="info-reply">
			<pinglun :commentContents="commentContents"></pinglun>
		</view> -->
		<view class="info-content" v-if="commentData" >
			<hb-comment ref="hbComment" :deleteTip="'确认删除？'" :cmData="commentData" :replyType="1"></hb-comment>
		</view>

	</view>
</template>

<script>
	import OneImg from '@/components/img/OneImg.vue'
	
	export default {
		components: {
			OneImg
		},
		data() {
			return {
				commentData: {
					"totalNum": 193,
					"comment": [{
							"id": 1, // 唯一主键
							"owner": false, // 是否是拥有者，为true则可以删除，管理员全部为true
							"hasLike": false, // 是否点赞
							"likeNum": 2, // 点赞数量
							"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0", // 评论者头像地址
							"nickName": "超长昵称超长...", // 评论者昵称，昵称过长请在后端截断
							"content": "啦啦啦啦", // 评论内容
							"parentId": null, // 所属评论的唯一主键
							"createTime": "2021-07-02 16:32:07" ,// 创建时间,
							position: '广东省',
							replyCount: 12,
							hideChildren: true,
							children: [
								{
									"id": 11, // 唯一主键
									"owner": false, // 是否是拥有者，为true则可以删除，管理员全部为true
									"hasLike": false, // 是否点赞
									"likeNum": 0, // 点赞数量
									"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0", // 评论者头像地址
									"nickName": "超长昵称超长...", // 评论者昵称，昵称过长请在后端截断
									"content": "我是子集评论的第二个", // 评论内容
									"replyName": "张三我最牛", // 被回复的用户昵称
									"createTime": "2021-07-02 16:32:07" ,// 创建时间,
									position: '河北',
								},{
									"id": 10, // 唯一主键
									"owner": false, // 是否是拥有者，为true则可以删除，管理员全部为true
									"hasLike": false, // 是否点赞
									"likeNum": 2, // 点赞数量
									"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0", // 评论者头像地址
									"nickName": "张三我最牛", // 评论者昵称，昵称过长请在后端截断
									"content": "我是子集评论的第一个", // 评论内容
									"createTime": "2021-07-02 16:32:07" ,// 创建时间,
									position: '山东',
								},
							]
						},
						{
							"id": 2,
							"owner": false,
							"hasLike": false,
							"likeNum": 2,
							"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797761970/0",
							"nickName": "寂寞无敌",
							"content": "我是评论的评论",
							"parentId": 1,
							"createTime": "2021-07-02 17:05:50",
							position: '山东',
							replyCount: 0,
							hideChildren: true,
						},
						{
							"id": 4,
							"owner": true,
							"hasLike": true,
							"likeNum": 1,
							"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797763270/0",
							"nickName": "name111",
							"content": "评论啦啦啦啦啦啦啦啦啦啦",
							"parentId": null,
							"createTime": "2021-07-13 09:37:50",
							position: '北京',
							replyCount: 0,
							hideChildren: false,
						},
						{
							"id": 5,
							"owner": false,
							"hasLike": false,
							"likeNum": 0,
							"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0",
							"nickName": "超长昵称超长...",
							"content": "超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论",
							"parentId": null,
							"createTime": "2021-07-13 16:04:35",
							position: '山东',
							replyCount: 0,
							hideChildren: false,
						},
						{
							"id": 13,
							"owner": false,
							"hasLike": false,
							"likeNum": 0,
							"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0",
							"nickName": "超长昵称超长...",
							"content": "@寂寞无敌 你怕不是个大聪明",
							"parentId": 1,
							"createTime": "2021-07-14 11:01:23",
							position: '山东',
							replyCount: 0,
							hideChildren: false,
						}
					]
				},
				topicDetail: {
					mainImg: 'https://eyunapp-1300649801.cos.ap-nanjing.myqcloud.com//img//2022/8/26/651a688a-0d9a-4693-bf32-9c78685640da.jpg',
					topicType: 1,
				},
				AppStyle: '',
				radioData: {
					left: 400,
					right: 232,
					leftLabel: '支持',
					rightLabel: '反对',
					showResult: false,
					totalNum: '10W '
				},
				multilData: [{
						id: 1,
						content: '西双版纳',
						number: 34,
						color1: '#F7F528',
						color2: '#F72928',
						canClick: false,
					},
					{
						id: 2,
						content: '上海',
						number: 23,
						color1: '#F7F528',
						color2: '#F72928',
						canClick: false,
					},
					{
						id: 3,
						content: '北京',
						number: 30,
						color1: '#F7F528',
						color2: '#F72928',
						canClick: false,
					},
					{
						id: 4,
						content: '深圳',
						number: 13,
						color1: '#F7F528',
						color2: '#F72928',
						canClick: false,
					}
				],
				commentContents: [{
					"content": "故国三千里，深宫二十年。一声何满子，双泪落君前。纵使日落清明，明月挂空，寥星冥冥，与我何情！",
					"name": " - 小码",
					"logo": "https://sns-img-hw.xhscdn.com/a1b708de-bb5e-e739-b586-8b912dfdf3d2?imageView2/2/w/1200/format/webp",
					"date": "08/10 08:00",
					'position': "浙江",
					"reply": [{
							"content": "您们都是大诗人，我寡言了",
							"name": " - 绿头鹅，鹅鹅曲靖向天歌",
							"reply_name": "陈旧的回忆",
							"reply_content": "劝君更进一杯酒，西出阳关无故人。",
							"logo": "https://sns-img-hw.xhscdn.com/77a50404-992f-3ca4-1ed3-595b6c18f9a1?imageView2/2/w/1200/format/webp",
							"date": "08/10 08:00",
							'position': "山东",
						},
						{
							"content": "劝君更进一杯酒，西出阳关无故人。",
							"name": " - 陈旧的回忆",
							"reply_name": "",
							"reply_content": "",
							"logo": "https://sns-img-bd.xhscdn.com/51883040-b869-3cc8-4564-6b1e49df7c91?imageView2/2/w/900/format/webp",
							"date": "08/10 08:00",
							'position': "石家庄",
						}
					]
				}]
			}
		},
		methods: {
			toNewsList() {
				// 1.不传参
				uni.navigateTo({
				    url:'/pages/news/news4Topic'
				});
			}
		}
	}
</script>

<style>

	.l-r-p {
		padding: 0px 18rpx
	}

	.detail-title {
		padding: 30rpx 30rpx 20rpx 30rpx;
		font-size: 36upx;
		line-height: 60upx;
		font-weight: bold;
		background: #fff;
	}

	.detail-content {
		color: #888;
	}

	.topic-mainImg {
		margin: 0rpx 30rpx 0rpx 30rpx;
		border-radius: 25px;
		overflow: hidden;
	}

	.topic-mainImg image {
		width: 100%
	}
	.cu-nav {
		position: relative;
		display: flex;
		padding: 0 18rpx;
		min-height: 50rpx;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		transition: all .6s ease-in-out 0s;
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}

	.cu-nav .content {
		color: #ff3333;
	}
</style>
